<template>
  <div class="create-form">
    <input type="text" v-model="content" />
    <button @click="addItem">加入</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
    }
  },
  methods: {
    addItem() {
      this.$emit('addItem', this.content)
    },
  },
}
</script>

<style lang="scss" scoped>
.create-form {
  width: 100%;
  height: 40px;
  //padding: 20px;
  border: 1px solid #3b36cc;
  display: flex;
  margin-top: 20px;
}
.create-form > input {
  background: none;
  outline: none;
  border: none;
  //width: 100%;
  flex: 1;
  height: 40px;
  padding-left: 20px;
  color: white;
}
.create-form > button {
  width: 50px;
  cursor: pointer;
  border: none;
  height: 40px;
  background-color: #3636cc;
  color: white;
}
</style>
